<template>
  <div
    id="page-modal-container"
    :class="
      type == 'fullScreen' ? 'full-screen-container' : 'custom-modal-container'
    "
  >
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :destroyOnClose="true"
      :mask="false"
      :closable="false"
      :footer="null"
      :zIndex="3000"
      :getContainer="getContainer"
      @cancel="closeModal()"
      transitionName="fade"
    >
      <slot> </slot>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "customModalPage",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "", //参数：fullScreen   全屏
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
      },
      immediate: true,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
    },
    getContainer() {
      return document.getElementById("page-modal-container");
    },
  },
};
</script>

<style lang="less">
//左侧-菜单存在
.custom-modal-container {
  .ant-modal-root {
    .ant-modal-wrap {
      position: fixed;
      top: 64px;
      left: 240px;
      bottom: 0;
      right: 0;
      .ant-modal {
        width: calc(100vw - 240px) !important;
        top: 0;
        padding-bottom: 0;
        margin: 0;
        .ant-modal-content {
          background-color: #f3f4f6;
          box-shadow: none;
          .ant-modal-body {
            padding: 0;
            height: calc(100vh - 64px) !important;
            overflow: hidden;
          }
        }
      }
    }
  }
}
//全屏
.full-screen-container {
  .ant-modal-root {
    .ant-modal-wrap {
      position: fixed;
      top: 64px;
      left: 0px;
      bottom: 0;
      right: 0;
      .ant-modal {
        width: calc(100vw - 0px) !important;
        top: 0;
        padding-bottom: 0;
        margin: 0;
        .ant-modal-content {
          background-color: #f3f4f6;
          box-shadow: none;
          .ant-modal-body {
            padding: 0;
            height: calc(100vh - 64px) !important;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
